<template>
  <div class="list bg-white px-3 mb-0">
    <buttonSearch class="pt-3">
      <template #left>
        <!-- 左边按钮 -->
        <el-button type="primary" size="mini" @click="openModal(false)">添加会员等级</el-button>
      </template>
      <template #right>
        <div>
          <span>选择升级标准：</span>
          <el-radio-group v-model="level">
            <el-radio-button label="累计消费" size='small'></el-radio-button>
            <el-radio-button label="累计次数" size='small'></el-radio-button>
          </el-radio-group>
        </div>
      </template>
    </buttonSearch>
    <!-- 商品列表 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px; margin-bottom: 60px"
      border
      ref="multipleTable"
    >
      <el-table-column prop="name" label="会员等级" align="center" width="180">
      </el-table-column>
      <el-table-column label="升级条件" align="center" width="280">
        <template v-slot='scope'>
          {{level + '：' + ((level==='累计消费')?scope.row.consume:scope.row.times)}}
        </template>
      </el-table-column>
      <el-table-column label="折扣率(%)" align="center" width="180" prop="discount"></el-table-column>
      <el-table-column label="等级序号" align="center" width="180" prop="level"></el-table-column>
      <el-table-column label="状态" align="center" width="180">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot='scope'>
          <el-button type="text" size="medium" @click="openModal(scope)">修改</el-button>
          <el-button type="text" size="medium" @click="delItem(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-footer
      class="d-flex align-items-center p-0 border-top position-fixed elFoot"
    >
      <div class="pl-2">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-footer>
    <!-- 添加规格对话框 -->
    <el-dialog
      title="添加等级"
      :visible.sync="dialogVisible"
      width="50%"
      top="0"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="等级名称" prop="name">
          <el-input
            v-model="form.name"
            placeholder="等级名称"
            size="mini"
            style="width: 200px"
          ></el-input>
          <small class="text-secondary d-block">
            设置会员等级名称
          </small>
        </el-form-item>
        <el-form-item label="等级权重" prop="level">
          <el-input
            v-model="form.level"
            placeholder="等级权重"
            type="number"
            size="mini"
            style="width:200px"
          ></el-input>
          <small class="text-secondary d-block">
            设置会员等级排序(此参数决定等级的高低,排序越大等级越高,请谨慎选择)
          </small>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="form.status" size="mini">
            <el-radio :label="0" border>启用</el-radio>
            <el-radio :label="1" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="升级条件">
          <div class="d-flex align-items-center">
            <small class="mr-2">累计消费满</small>
            <el-input 
              v-model="form.consume"
              placeholder="累计消费"
              type='number'
              size="mini"
              style="width:200px"
              class="mr-2">
              <template slot="append">元</template>
              </el-input>
          </div>
          <small class="text-secondary d-block">
            设置会员等级所需要的累计消费必须大于等于0,单位：元
          </small>
          <div class="d-flex align-items-center">
            <small class="mr-2">累计次数满</small>
            <el-input 
              v-model="form.times"
              placeholder="累计次数"
              type='number'
              size="mini"
              style="width:200px"
              class="mr-2">
              <template slot="append">次</template>
              </el-input>
          </div>
          <small class="text-secondary d-block">
            设置会员等级所需要的购买量必须大于等于0,单位：笔
          </small>
        </el-form-item>
        <el-form-item label="折扣率(%)" class="mb-0">
            <el-input 
              v-model="form.discount"
              placeholder="折扣率(%)"
              type='number'
              size="mini"
              style="width:200px">
              </el-input>
          </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import buttonSearch from "@/components/common/button-search";
export default {
  name: "list",
  inject: ['app'],
  data() {
    return {
      level:'累计消费',
      superSearch: false,
      //   类型
      options: ["普通会员", "黄金会员"],
      // 列表数据
      tableData: [
        {
          name:'普通会员',
          consume:500,
          times:100,
          discount:10,
          level:1,
          status:1,
          create_time:''
        }
      ],
      currentPage: 1,
      dialogVisible: false,
      search:{
        keyword:'',
        group_id:'',
        time:''
      },
      form: {
          name:'',
          consume:0,
          times:0,
          discount:0,
          level:0,
          status:1
      },
      editIndex: -1,
    };
  },
  components: {
    buttonSearch,
  },
  props: {},
  created() {},
  computed: {},
  watch: {},
  methods: {
    delItem(item) {
      this.$confirm("是否删除该等级?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(item.$index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openModal(e) {
      if (!e) {
        // 初始化表单
        this.form = {
          name:'',
          consume:0,
          times:0,
          discount:0,
          level:0,
          status:1
        };
        this.editIndex = -1;
      } else {
        this.form = {
          name:e.row.name,
          consume:e.row.consume,
          times:e.row.times,
          discount:e.row.discount,
          level:e.row.level,
          status:e.row.status
        };
        this.editIndex = e.$index;
      }
      this.dialogVisible = true;
    },
    submit() {
        let msg = "";
        // 添加表单内容
        if (this.editIndex === -1) {
          this.tableData.unshift(this.form);
          msg = "添加表单内容成功";
        } else {
          // 修改表单内容  this.tableData[this.editIndex] = this.form一起修改有问题 只能单个进行修改
          let item = this.tableData[this.editIndex]
          item.name=this.form.name
          item.consume=this.form.consume
          item.times=this.form.times
          item.discount=this.form.discount
          item.level=this.form.level
          item.status=this.form.status
          msg = "修改表单内容成功"
        }
        this.dialogVisible = false;
        this.$message({
          message: msg,
          type: "success",
        });
    },
    // 改变商品状态
    changeStatus(item) {
      item.status = item.status === 1 ? 0 : 1;
      this.$message({
        message: item.status ? "启用" : "禁用",
        type: "success",
      });
    },
    // 搜索商品
    searchEvent(e) {
      if (typeof e == "string") {
        console.log("搜索", e);
        return;
      }
      console.log("超级搜索");
    },
    // 清空搜索条件
    clearSearch() {
      this.search= {
        keyword:'',
        group_id:'',
        time:''
      }
      this.$refs.buttonSearch[this.tabIndex].closeSuperSearch();
    },
    choose() {
    //    接收image-dialog传来的chooselist数组，即res就是chooselist
        this.app.chooseImage(res => {
            this.form.avatar=res[0].url
        },3)
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  margin: -20px;
  margin-top: -8px;
  background-color: white;
}
.elFoot {
  width: 100%;
  bottom: 0;
  background-color: white;
  z-index: 10;
}
/deep/.el-dialog__body {
  padding: 15px 20px;
}
</style>
